<template>
  <div class="container">
      <nav-bar :title="realTitle"></nav-bar>
      <table>
          <tbody>
            <component is="row"></component>
            <component is="row"></component>
            <component is="row"></component>
          </tbody>
      </table>
      <div class="search-bar">
          <div class="city">北京</div>
          <input class="search-inpt" type="text">
          <button class="search-btn">搜索</button>
      </div>
      <div class="current-local">
          <span class="current-city">北京<span class="tips">当前定位城市</span></span>
          <button class="relocal">重新定位</button>
      </div>
      <div class="wrapper" ref="wrappers">
          <ul class="lists">
              <li v-for="(val, keys) in cityList" :key="keys">
                  <h4 class="list-achor">{{keys}}</h4>
                  <ul>
                      <li class="list-item" v-for="(city, index) in val" :key="index">{{city.name}}</li>
                  </ul>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import NavBar from '../../components/NavBar'
import api from '../../utils/api.js'
import row from './row'
export default {
    components: {
        NavBar,
        row
    },
    data() {
        return {
            realTitle: '选择收货地址',
            cityList: []
        }
    },
    mounted() {
        let wrapper = this.$refs.wrappers;
        this.$nextTick(()=> {
            if(!this.scroll) {
                this.scroll = new BScroll(wrapper)
            }
        })
    },
    created() {
        api.getCityList()
        .then(res => {
            this.cityList = res.data.cities
        })
    }
}

</script>
<style lang="scss" scoped>
.search-bar {
    height: 0.44rem;
    display: flex;
    align-items: center;
    padding: 0 0.12rem;
    justify-content: space-between;
    .city {
        font-size: 0.14rem;
        color: #333;
    }
    .search-inpt {
        height: 0.3rem;
        line-height: 0.3rem;
        flex: 1;
        border: 1px solid #CCCCCC;
        border-radius: 0.2rem;
        outline: none;
        padding: 0 0.12rem;
        margin: 0 0.14rem 0 0.3rem;
    }
    .search-btn {
        font-size: 0.16rem;
        color: #dd3333;
    }
}
.current-local {
    display: flex;
    height: 0.44rem;
    align-items: center;
    font-size: 0.14rem;
    padding: 0 0.14rem;
    justify-content: space-between;
    color: #333;
    .tips {
        font-size: 0.12rem;
        color: #999;
        margin-left: 0.1rem;
    }
    .relocal {
        color: #dd3333;
    }
}
.wrapper {
    // height: calc(100vh - 1.33rem);
    position: absolute;
    top: 1.33rem;
    bottom: 0;
    width: 100%;
    left: 0;
    overflow: hidden;
    .lists {
        width: 100%;
        text-align: left;
        display: flex;
        flex-direction: column;
        .list-achor {
            flex: 1;
            height: 0.22rem;
            background: #f6f6f6;
            font-size: 0.16rem;
            color: #333;
            line-height: 0.22rem;
            padding: 0 0.15rem;
        }
        .list-item {
            height: 0.48rem;
            line-height: 0.48rem;
            padding: 0 0.14rem;
            position: relative;
            font-size: 0.16rem;
            &::after {
                content: "";
                position: absolute;
                height: 1px;
                background: #f2f1f6;
                bottom: 0;
                left: 0.14rem;
                right: 0.14rem;
                transform: scale(1, 0.5);
            }
        }
    }
}
</style>